<!--
 * @Author: your name
 * @Date: 2021-08-28 16:26:20
 * @LastEditTime: 2021-08-30 09:45:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /hr63/src/views/dashboard/components/work-calendar.vue
-->
<template>
  <div class="calendar-container">
    <!-- 年和月 -->
    <div style="display:flex;justify-content:flex-end">
      <!-- 年 用组件给定一个日期，日期获取年，年取前五年 + 后五年 -->

      <el-select v-model="currentYear" placeholder="请选择年" @change="changeDate">
        <el-option v-for="item in yearList" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="currentMonth" placeholder="请选择月" @change="changeDate">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-calendar v-model="value">
      <template slot="dateCell" slot-scope="{date, data}">
        {{ date.getDate() }} <span
          v-if="date.getDay()=='6'||date.getDay()=='0'"
          style="background:#f8794d;color:#fff;border-radius:50%;padding:5px;"
        >休</span>
      </template>
    </el-calendar>

  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      value: new Date(),
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      yearList: []
    }
  },
  created() {
    //  this.value.getFullYear())  //   item==每一项   index==索引
    //   0,1,2,3,4 ==>  -5,-4,-3,-2,-1
    //  2021-0 =2021   2021-1=2021   2021-2=2019  2021-3=2018  2021-4=2017
    //
    // console.log(Array.from(Array(11), (item, index) => this.value.getFullYear() - index + 5), 8888)
    this.yearList = Array.from(Array(11), (item, index) => this.value.getFullYear() + index - 5)
  },
  methods: {
    changeDate() {
      /*
			1-获取当前点击的年月
			2-将获取的年合月拼接赋值给 value即可  ======时间单元格式  ‘2021-08’  ===> new  Date('2021-08')

			 */
      this.value = new Date(`${this.currentYear}-${this.currentMonth}`)
      console.log(this.value)
    }
  }
}

</script>
<style lang='scss' scoped>
  .calendar-container {
    ::v-deep .el-calendar__header {
      display: none;
    }

    .el-select {
      width: 100px;
      height: 30px;
      margin-right: 10px;
    }
  }

</style>
